<template>
  <div>
    <el-form class="input-form"
             label-position="right"
             label-width="120px"
             ref="editForm"
             :rules="propRules"
             :disabled="propReadonly"
             :model="form"
    >
      <el-row :gutter="20">
        <el-col :span="14">
          <el-row :gutter="20">
            <el-col :span="24">
              <h4 style="text-align: right">品名/品规/厂商输入完，右侧显示库存相关耗材！</h4>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="品名" prop="matrName" >
                <el-input v-model="form.matrName" @input="fetchDataRight"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="品规" prop="matrSpec">
                <el-input v-model="form.matrSpec" @input="fetchDataRight"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="厂商" prop="mfgName">
                <el-input v-model="form.mfgName" @input="fetchDataRight"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="品类" prop="categoryId" >
                <FortenDataviewDown
                  ref="categoryName"
                  propDownType="form"
                  propFieldText="categoryName"
                  :propForm="form"
                  :propDisabledInput="propReadonly"
                  @select-change="selectChange"
                  :propUserParam="{viewKey: 'base_matr_category'}"
                ></FortenDataviewDown>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="单位" prop="skuUnit">
                <el-input v-model="form.skuUnit"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="预估价格" prop="skuPrice">
                <el-input-number v-model="form.skuPrice"  :precision="2" :step="10" :max="999999999"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="预估用量/年" prop="qtyYear">
                <el-input-number ref="qtyYear" v-model="form.qtyYear"  :precision="2" :step="10" :max="999999999"></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="是否阳采" prop="flagSunpurchase" >
                <el-switch v-model="form.flagSunpurchase" active-color="#13ce66" @change="flagSunpurchaseChange"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="阳采代码" prop="sunpurchaseCode">
                <el-input v-model="form.sunpurchaseCode" :disabled="!form.flagSunpurchase"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="备案采购" prop="flagRecordPurchase" >
                <el-switch v-model="form.flagRecordPurchase" active-color="#13ce66"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="欲淘汰品牌" prop="eliminateMatrName" >
                <FortenDataviewDown
                  ref="eliminateMatrName"
                  propDownType="form"
                  :propDisabledInput="propReadonly"
                  propFieldText="eliminateMatrName"
                  :propForm="form"
                  @select-change="selectChange"
                  :propUserParam="{viewKey: 'base_matr_select'}"
                ></FortenDataviewDown>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="新品优势" prop="advantageRemark">
                <el-input v-model="form.advantageRemark" size="medium" type="textarea" :autosize="{ minRows: 1, maxRows: 2}"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="使用范围" prop="useScopeNames">
                <el-radio-group v-model="admUseScopecheck">
                  <el-radio
                            v-for="item in utils.getDictDataList('adm_use_scope')"
                            :key="item.value"
                            :label="item.value"
                  >{{item.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="用途" prop="useNames">
                <el-checkbox-group  v-model="admUsecheckList"   >
                  <el-checkbox
                    v-for="item in utils.getDictDataList('adm_use')"
                    :key="item.value"
                    :label="item.value"
                  >{{item.label}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="申购理由" prop="useReasonNames">
                <el-checkbox-group  @change = "useReasonNamesChange"  v-model="admUseReasoncheckList"  class="el-checkbox-group-inline"  >
                  <el-checkbox
                    v-for="item in utils.getDictDataList('adm_use_reason')"
                    :key="item.value"
                    :label="item.value"
                  >{{item.label}}</el-checkbox>
                </el-checkbox-group>
                <el-input v-model="useReasonOther" ref="useReasonOther" v-show="hasOther" placement="请输入" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="科室要求" prop="deptRemark">
                <el-input v-model="form.deptRemark" size="medium" type="textarea" :autosize="{ minRows: 1, maxRows: 4}"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="10">
          <data-view
            propViewKey="select_matr_matrapply"
            ref="dataViewRight"
            class="data-view-inlinebtn"
            @after-load="afterLoad"
            @view-ready="viewReady"
            @current-change="currentChange"
          >
          </data-view>
        </el-col>
      </el-row>

    </el-form>
  </div>
</template>

<script>

export default {
  data() {
    return {
      form: {},
      viewData: {},
      admUseScopecheck: '',
      admUsecheckList: [],
      admUseReasoncheckList: [],
      hasOther: true,
      useReasonOther: '',
    }
  },
  methods: {
    //刷新父界面
    fetchParent() {
      this.propParent.fetchData()
    },
    //刷新右侧单元格
    fetchDataRight() {
      //固定数据筛选参数
      if (this.strings.isNotBlank(this.propInitData.id)) this.utilVue.loadShow(true)


      let matrNameS = this.strings.toStr((this.form.matrName))
      let matrSpecS = this.strings.toStr(this.form.matrSpec)
      let mfgNameS = this.strings.toStr(this.form.mfgName)
      let wrapper = this.$newWrapper()
      if (matrNameS)  wrapper.like('name', matrNameS)
      if (matrSpecS)  wrapper.like('spec', matrSpecS)
      if (mfgNameS)  wrapper.like('mfg_name', mfgNameS)
      this.$refs.dataViewRight.setQueryWrapper(wrapper)
    },
    afterLoad() {
      this.utilVue.loadHide()
    },
    viewReady() {
      this.$refs.dataViewRight.ocSetShowRadioBox(true)
    },
    //行选中之后
    currentChange(params) {
      //切换复选框状态
      let tbMain = this.$refs.dataViewRight.$refs.tbMain
      let rowSel = tbMain.getRowById(params.row.rowid)
      tbMain.setRadioRow(rowSel)
      let rowData = params.row.row

      //设置耗材信息
      this.$set(this.form, 'matrName', rowData.name)
      this.$set(this.form, 'matrSpec', rowData.spec)
      this.$set(this.form, 'mfgName', rowData.mfgName)
      this.$set(this.form, 'skuUnit', rowData.skuUnit)
      this.$set(this.form, 'skuPrice', rowData.skuPrice)
      this.$set(this.form, 'categoryId', rowData.categoryId)
      this.$set(this.form, 'categoryName', rowData.categoryName)
      this.$refs.qtyYear.focus()
    },
    //下拉列表选择后
    selectChange({fieldText, row}) {
      if (fieldText == 'categoryName') { //选择分类
        this.$set(this.form, 'categoryId', row.id)
        this.$set(this.form, 'categoryName', row.categoryName)
      } else if (fieldText == 'eliminateMatrName') { //选择耗材
        this.$set(this.form, 'eliminateMatrId', row.id)
        this.$set(this.form, 'eliminateMatrName', row.name)
        this.$set(this.form, 'eliminateMatrSpec', row.spec)
      }
    },
    //申购理由 改变
    useReasonNamesChange(param) {
      //包含其他，则显示其他输入框
      this.hasOther  = param.includes('other')
      if (!this.hasOther) this.useReasonOther = ''
    },

    flagSunpurchaseChange() {
      if (!this.form.flagSunpurchase) this.$set(this.form, 'sunpurchaseCode', '')
    }
  },
  created() {
    this.$emit('event-register', {
      validate: (callback) => {
        this.$refs.editForm.validate(callback)
      },
      beforeSave: () => {
        this.$emit('data-callback', this.form)
        if (this.strings.isBlank(this.form.categoryName)) {
          this.$message.warning('请选择分类')
          console.log('this.$refs.categoryName', this.$refs.categoryName)
          this.$refs.categoryName.show()
          return false
        }

        //使用范围
        this.$set(this.form, 'useScopeCodes', this.admUseScopecheck)
        this.$set(this.form, 'useScopeNames', this.utils.getDictLabel(this.admUseScopecheck, 'adm_use_scope', '', false))

        //用途
        let useCodes = []
        let useNames = []
        if (this.admUsecheckList.length > 0) {
          this.utils.getDictDataList('adm_use').filter(ob => this.admUsecheckList.includes(ob.value)).forEach(ob => {
            useCodes.push(ob.value)
            useNames.push(ob.label)
          })
        }
        this.$set(this.form, 'useCodes', useCodes.join(','))
        this.$set(this.form, 'useNames', useNames.join(','))

        //申购理由
        let useReasonCodes = []
        let useReasonNames = []
        if (this.admUseReasoncheckList.length > 0) {
          this.utils.getDictDataList('adm_use_reason').filter(ob => this.admUseReasoncheckList.includes(ob.value)).forEach(ob => {
            useReasonCodes.push(ob.value)
            useReasonNames.push(ob.label)
          })
        }
        this.$set(this.form, 'useReasonCodes', useReasonCodes.join(','))
        this.$set(this.form, 'useReasonNames', useReasonNames.join(','))
        this.$set(this.form, 'useReasonOther', this.useReasonOther)
        return true
      },
      afterMove: (formData, initData) => {
        this.form = global.utils.jsonClone(formData)
        this.$set(this.form, 'applyId', this.propInitData.id)

        this.admUseScopecheck = this.form.useScopeCodes
        this.admUsecheckList = this.strings.defaultString(this.form.useCodes, '').split(',')
        this.admUseReasoncheckList = this.strings.defaultString(this.form.useReasonCodes, '').split(',')

        //包含其他，则显示其他输入框
        this.hasOther  = this.admUseReasoncheckList.includes('other')
        this.useReasonOther  = this.form.useReasonOther

        this.fetchDataRight()
      },
      afterSave: () => {
        this.fetchParent()
      },
      beforeDelete: () => {
        return true
      },
      afterDelete: () => {
      },
      beforeFlow: (flowButtonKey) => {
        return true
      },
      afterFlow: (flowButtonKey) => {
      },
      beforeClose: () => {
        return true
      }
    })
  },
  props: {
    propParent: Object,
    propInitData: Object,
    propPrimaryKey: String,
    propDictionaries: Object,
    propCurrentRow: Object,
    propViewFormData: Object,
    propReadonly: Boolean,
    propStatus: String,
    propRules: Object
  },
  components: {
  },
  computed: {
  }
}
</script>

<style lang="scss" scoped>
  .container {
    width: 100%;
    height: 100%;
  }
</style>
